<template>
	<div class="search">
		<div class="search_header border-bottom" ref="search_header">
			<div class="back iconfont" @click="back">&#xe697;</div>
			<div class="search_icon iconfont">&#xe6ac;</div>
			<input type="text" class="search_input" placeholder="寻找宝贝" ref="search_input_focus" v-model="search_word" >
			<div class="search_btn" @click="search_btn">搜索</div>
		</div>
		<div class="hot_search border-bottom">
			热搜：
			<div class="hot_search_right">
				<div class="hot_search_keyword" v-for="(item,index) of hot_search" :key="index" @click="search_words(index)">{{item}}</div>
			</div>
		</div>
		<div class="history_search border-bottom">
			<div class="history_search_title border-bottom">
				<span class="title">历史搜索</span>
				<div class="clear_history" @click="clear_record">清空记录</div>
			</div>
			<div class="history_search_list" v-for="(item,index) of search_record" :key="index" v-if="search_record.length">{{item}}</div>
			<div class="history_search_list2" v-if="search_record.length==0">您还没有搜索记录噢</div>
		</div>
		<div class="search_content" v-if="search_word.length">
			<div class="search_content_item border-bottom">1111</div>
			<div class="search_content_item border-bottom">2222</div>
			<div class="search_content_item border-bottom">3333</div>
			<div class="search_content_item border-bottom">4444</div>
			<div class="search_content_item border-bottom">5555</div>
			<div class="search_content_item border-bottom">6666</div>
		</div>
	</div>
</template>
<script>
export default {
  name: 'Search_page',
  data(){
  	return{
  		search_record:[],
  		hot_search:["双十一","SK2","贝德玛","雅诗兰黛","兰蔻","迪奥","雪花秀","爱他美","德运"],
  		search_word:""
  	}
  },
  props:{
        swiperList:Array,
        icon_img:String,
        icon_list:Array,
        coupon_list:Array,
        seckill_link:String,
        seckill_list:Array,
        seckill_tit:String,
        goods_list1_data:Array,
        goods_list1_img:String,
        goods_list1_2_data:Array,
        goods_list1_2_img:String,
        goods_list2_data:Array,
        goods_list2_title:String
    },
  methods:{
  	back(){
  		// this.$router.push('/')
  		this.$router.go(-1)
  	},
  	search_words(index){
  		//this.search_word=this.hot_search[index];
  		if(this.search_record.length!==0){
  			for(let i=0;i<this.search_record.length;i++){
	  			if(this.search_record.indexOf(this.hot_search[index]) == -1){
	  				this.search_record.push(this.hot_search[index])
	  			}
	        }
	  	}else{
	  		this.search_record.push(this.hot_search[index])
	  	}
  	},
  	search_btn(){
  		let Sword=this.search_word;
  		if(this.search_record.length!==0){
  			for(let i=0;i<this.search_record.length;i++){
	  			if(this.search_record.indexOf(Sword) == -1){
	  				this.search_record.push(Sword)
	  			}
	        }
	  	}else{
	  		this.search_record.push(Sword)
	  	}
  	},
  	clear_record(){
  		this.search_record=[];
  	}
  },
  mounted(){
  	this.$refs.search_input_focus.focus();
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.search{width:100%;overflow:hidden;position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;background:#f7f7f7;}
.search_header{width:100%;overflow:hidden;background:#fff;height:45px;box-sizing:border-box;touch-action: none;display: -webkit-box;display: -webkit-flex;display: flex;}
.back{width:45px;height:45px;text-align:center;line-height:45px;font-size:0.55rem;color:#ccc;}
.search_icon{width:0.6rem;height:0.6rem;line-height:0.6rem;text-align:center;color:#999;background:#eee;border-top-left-radius:0.1rem;border-bottom-left-radius:0.1rem;margin-top:0.15rem;}
.search_input{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;border-top-right-radius:0.1rem;border-bottom-right-radius:0.1rem;border-top-left-radius:0;border-bottom-left-radius:0;color:#666;font-size:0.25rem;background:#eee;height:0.6rem;margin-top:0.15rem;}
.search_btn{width:0.9rem;font-size:14px;color:#801da1;height:45px;line-height:45px;text-align:center;}

.hot_search{overflow:hidden;padding:10px 10px 2px 10px;display:flex;font-size:14px;color:#666;line-height:18px;background:$bgColor;}
.hot_search_right{flex:1;}
.hot_search_keyword{display:inline-block;border:0.5px solid #999;padding:3px 6px;border-radius:3px;color:#999;margin-right:8px;margin-bottom:8px;font-size:12px;line-height:12px;}
.history_search{overflow:hidden;padding:10px;margin-top:5px;background:$bgColor;}
.history_search_title{display:flex;color:#666;}
.history_search_title .title{flex:1;font-size:14px;padding-bottom:10px;}
.history_search_title .clear_history{font-size:12px;line-height:14px;}
.history_search_list{font-size:12px;color:#666;padding-top:10px;}
.history_search_list:nth-child(1){padding-top:0;}
.history_search_list2{font-size:12px;color:#666;padding-top:10px;text-align:center;}

.search_content{position:absolute;left:0;top:45px;right:0;bottom:0;z-index:3;background:#fff;padding:0 10px;}
.search_content_item{padding:10px 0;font-size:12px;color:#666;}

</style>